<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>二手交易平台</title>
  <link rel="stylesheet" type="text/css" href="/ssm/consumer/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/ssm/consumer/res/layui/css/layui.css">
  <link rel="stylesheet" href="/ssm/consumer/css/style2.css" />
  <script type="text/javascript" src="/ssm/consumer/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <style type="text/css">
  	.userNotLogin{
  		display: none;
  	}
  </style>
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="#">首页</a>
      </p>
      <div class="sn-quick-menu">
        	<div class="userLogin">
        		<div class="login"><a href="/ssm/consumer/login.html">登录</a></div>
        		<div class="login"><a href="/ssm/consumer/register.html">注册</a></div>
        	</div>
        	<div class="userNotLogin">
        		<div class="login"><a href="/ssm/consumer/userInfo.html" id="username">用户名</a></div>
        		<div class="login"><a href="JavaScript:loginOut();">退出</a></div>
        		<div class="login"><a href="/ssm/consumer/myOrder.html">我的订单</a></div>
        		<div class="sp-cart"><a href="/ssm/consumer/shopcart.html">购物车</a></div>
        	</div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
           <a href="/ssm/consumer/index.html" title="二手交易平台">
            <img src="/ssm/consumer/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" id="keyword" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" id="searchbutton" lay-filter="formDemo" onclick="return false">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


	<div class="c-banner">
		<div class="banner">
			<ul>
			</ul>
		</div>
		<div class="nexImg">
			<img src="/ssm/consumer/img/nexImg.png" />
		</div>
		<div class="preImg">
			<img src="/ssm/consumer/img/preImg.png" />
		</div>
		<div class="jumpBtn">
			<ul>
			</ul>
		</div>
	</div>

  <div class="content content-nav-base commodity-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="index.html" class="active">首页</a>
          </div>
          <div class="inner-cont2">
            <a href="/ssm/consumer/myProduct.html" >我的商品</a>
          </div>
        </div>
      </div>
    </div>
    <div class="commod-cont-wrap">
      <div class="commod-cont w1200 layui-clear">
        <div class="left-nav">
          <div class="title"><a style="color:#fff;" href="/ssm/consumer/index.html">所有分类</a></div>
          <div class="list-box">
            <dl id="classesList">
            </dl>
          </div>
        </div>
        <div class="right-cont-wrap">
          <div class="right-cont">
           <!--  <div class="sort layui-clear">
              <a class="active" href="javascript:;" event = 'volume'>销量</a>
              <a href="javascript:;" event = 'price'>价格</a>
              <a href="javascript:;" event = 'newprod'>新品</a>
              <a href="javascript:;" event = 'collection'>收藏</a>
            </div> -->
            <div class="prod-number">
             <!--  <span>200个</span> -->
            </div>
            <div class="cont-list layui-clear" id="list-cont">
             
             
            </div>
           
            <div id="demo0" style="text-align: center;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script type="text/javascript" src="/ssm/consumer/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">

$("#searchbutton").click(function Search(){
	location.href="/ssm/consumer/index.html?pname="+$("#keyword").val();
	return false;
})

$("#keyword").val(getQueryString('pname'));
//获取商品分类
getProductClassesList();
function getProductClassesList(){
	var postData = {
			page:1,
			limit:100,
			status:1
	}
	$.post('/ssm/classes/queryList2.do',postData,function(data){
		console.log(data);
		for(var idx in data.body){
			var classesItem = data.body[idx];
			var item = '';
			item += '<dt><a href="/ssm/consumer/index.html?cpid='+classesItem[0].pid+'">'+classesItem[0].pname+'</a></dt>';
			for(var k in classesItem){
				item+='<dd><a href="/ssm/consumer/index.html?cid='+classesItem[k].cid+'">'+classesItem[k].cname+'</a></dd>';
			}
			
			$("#classesList").append(item);
			
		}
		
	})
}

var info;
getUserInfo();
function  getUserInfo(){
    $.ajax({
        url:"/ssm/consumer/loginInfo.do",
        type:"POST",
        dataType:"json",
        success:function(data){
        	info = data.body
           if(info!=null){
        	   $(".userLogin").hide();
        	   $("#username").text(info.real_name);
        	   $(".userNotLogin").show();
           }else{
           }
        } 
    })
 }
 
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]); return null;
} 
//获取商品列表
getProductList();
function getProductList(){
	var postData = {
			page:1,
			limit:100,
			status:1,
			cid:getQueryString("cid"),
			pname:getQueryString('pname'),
			cpid:getQueryString("cpid"),
	}
	$.post('/ssm/product/queryList.do',postData,function(data){
		console.log(data);
		for(var idx in data.body.list){
			var productItem = data.body.list[idx];
			var item = ' <div class="item">';
			item+='<div class="img">';
			var imgs = productItem.imgurl.split(",");
			item+='<a href="/ssm/consumer/details.html?pid='+productItem.pid+'"><img style="width:280px;height:280px;" src="'+imgs[0]+'"></a>';
			item+='</div>';
			item+='<div class="text">';
			item+='<p class="title">'+productItem.pname+'</p>';
			item+='<p class="price">';
			item+='<span class="pri">￥'+productItem.estoreprice+'</span>';
			item+='<a class="nub" href="/ssm/consumer/details.html?pid='+productItem.pid+'">查看详情</a>';
			item+='</p>';
			item+='</div>';
			item+='</div>';
			
			/* var item = '<div class="'+(idx % 3 != 2?'product_box':'product_box no_margin_right')+'">';
			item+='<a href="/ssm/consumer/productDetail.html?pid='+productItem.pid+'">';
			item+='<img src="'+productItem.imgurl+'" width="140" height="180" alt="" title="'+productItem.pname+'"/>';
			item+='</a>';
			item+='<h3>'+productItem.pname+'</h3>';
			item+='<p class="product_price">￥ '+productItem.estoreprice+'</p>';
			item+='<i class="fa fa-shopping-cart"></i><a href="javascript:addCart(\''+productItem.pid+'\')">加入购物车</a>';
        	item+=' <a href="/ssm/consumer/productDetail.html?pid='+productItem.pid+'">查看详情</a>';
        	item+='</div>';
        	if(idx%3==3){
        		item+='<div class="cleaner"></div>';
        	} */
			$("#list-cont").append(item);
		}
		if(data.body.list.length==0){
			$("#list-cont").append("<h1 style='text-align:center;'>没有找到相关的商品</h1>");
		}
		
	})
}

function loginOut(){
	$.post('/ssm/consumer/logout.do',function(){
		
		location.href="/ssm/consumer/login.html";
	})
}
</script>

<script type="text/javascript">
//定时器返回值
var time=null;
//记录当前位子
var nexImg = 0;
//用于获取轮播图图片个数
var imgLength = $(".c-banner .banner ul li").length;
//当时动态数据的时候使用,上面那个删除
// var imgLength =0;
//设置底部第一个按钮样式
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");

//页面加载
$(document).ready(function(){
	// dynamicData();
	//启动定时器,设置时间为3秒一次
	time =setInterval(intervalImg,3000);
});

//点击上一张
$(".preImg").click(function(){
	//清楚定时器
	clearInterval(time);
	var nowImg = nexImg;
	nexImg = nexImg-1;
	console.log(nexImg);
	if(nexImg<0){
		nexImg=imgLength-1;
	}
	//底部按钮样式设置
	$(".c-banner .jumpBtn ul li").css("background-color","white");
	$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
	
	//将当前图片试用绝对定位,下一张图片试用相对定位
	$(".c-banner .banner ul img").eq(nowImg).css("position","absolute");
	$(".c-banner .banner ul img").eq(nexImg).css("position","relative");
	
	//轮播淡入淡出
	$(".c-banner .banner ul li").eq(nexImg).css("display","block");
	$(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
	$(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){
		$(".c-banner ul li").eq(nowImg).css("display","none");
	});
	
	//启动定时器,设置时间为3秒一次
	time =setInterval(intervalImg,3000);
})

//点击下一张
$(".nexImg").click(function(){
	clearInterval(time);
	intervalImg();
	time =setInterval(intervalImg,3000);
})

//轮播图
function intervalImg(){
	if(nexImg<imgLength-1){
		nexImg++;
	}else{
		nexImg=0;
	}
	
	//将当前图片试用绝对定位,下一张图片试用相对定位
	$(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute");
	$(".c-banner .banner ul img").eq(nexImg).css("position","relative");
	
	$(".c-banner .banner ul li").eq(nexImg).css("display","block");
	$(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
	$(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
		$(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
	});
	$(".c-banner .jumpBtn ul li").css("background-color","white");
	$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
}



	//动态数据轮播图
	//动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据
dynamicData();
 function dynamicData(){
 	$.ajax({
 		url:"/ssm/banner/queryList.do",
 		type:"get",
 		dataType:"json",
 		success:function(data){
 			console.log(data);
 			if(data.code=='01'){
 				var data = data.body.list;
 				$.each(data,function(i){
 					$(".c-banner .banner ul").append('<li><a href="'+this.link+'"> <img src="'+this.imgUrl+'"></a></li>');
 					$(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>')
 				})
 			}
 			//获取图片总数量
 			imgLength = $(".c-banner .banner ul li").length;
 			//为底部按钮定义单击事件
 			$(".c-banner .jumpBtn ul li").each(function(){
 				//为每个按钮定义点击事件
 				$(this).click(function(){
 					clearInterval(time);
 					$(".c-banner .jumpBtn ul li").css("background-color","white");
 					jumpImg = $(this).attr("jumpImg");
 					if(jumpImg!=nexImg){
 						var after =$(".c-banner .banner ul li").eq(jumpImg);
 						var befor =$(".c-banner .banner ul li").eq(nexImg);
 						
 						//将当前图片试用绝对定位,下一张图片试用相对定位
 						$(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
 						$(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
 						
 						after.css("display","block");
 						after.stop().animate({"opacity":1},1000);
 						befor.stop().animate({"opacity":0},1000,function(){
 							befor.css("display","none");
 						});
 						nexImg=jumpImg;
 					}
					$(this).css("background-color","black");
 					time =setInterval(intervalImg,3000);
 				});
 			});
 		}
 	})
 }
</script>
</body>
</html>